<template>
  <div class="demo">
    <code-section>
      <div slot="title">1. 前置条件，等待环境初始化</div>
      <pre  slot="code">
import { FireFlyWallet } from 'fireflywallet-api';
const appname = "测试应用";//应用名称，可以为空
const appid = "测试应用ID";//应用ID，可以为空
const FFWProxy = new FireFlyWallet(appname,appid);
FFWProxy.ready().then(FFW =>{
  console.log('firefly wallet is ready!')
}).catch(err=>{
  console.error(err)
});
      </pre>
      <div slot="result">
        {{ready?'firefly wallet is ready!':''}}
      </div>
    </code-section>

    <code-section>
      <div slot="title">2. 获取版本号</div>
      <pre slot="code">
FFWProxy.getVersion().then(version=>{
  console.log(version)
}).catch(err=>{
  console.error(err)
})
或者
FFWProxy.version
      </pre>
      <div slot="result">{{version}}</div>
    </code-section>

    <code-section>
      <div slot="title">3. 获取运行平台</div>
      <pre slot="code">
FFWProxy.getPlatform().then(platform=>{
  console.log(platform);
}).catch(err=>{
  console.error(err);
})
或者
FFWProxy.platform
      </pre>
      <div slot="result">{{platform}}</div>
    </code-section>

    <code-section>
      <div slot="title">4. 获取当前用户恒星账户公钥</div>
      <pre slot="code">
FFWProxy.getAccountId().then(accountid=>{
  console.log(accountid);
}).catch(err=>{
  console.error(err)
})
或者
FFWProxy.accountId
      </pre>
      <div slot="result">{{accountid}}</div>
    </code-section>

    <code-section>
      <div slot="title">5. 获取设备UUID</div>
      <pre slot="code">
FFWProxy.getUuid().then(uuid=>{
  console.log(`uuid=${uuid}`);
}).catch(err=>{
  console.error(err);
})
或者
FFWProxy.uuid
      </pre>
      <div slot="result">uuid={{uuid}}</div>
    </code-section>

    <code-section>
      <div slot="title">6. 获取当前钱包所用语言</div>
      <pre slot="code">
FFWProxy.getLocale().then(locale=>{
  console.log(`locale=${locale}`)
}).catch(err=>{
  console.error(err)
})
或者
FFWProxy.locale
      </pre>
      <div slot="result">locale={{locale}}</div>
    </code-section>
    
    <code-section>
      <div slot="title">7. 获取当前钱包的联系人</div>
      <pre slot="code">
FFWProxy.getContacts().then(contacts=>{
  console.log(contacts);
}).catch(err=>{
  console.error(err)
})
或者
FFWProxy.contacts
      </pre>
      <div slot="result">{{contacts}}</div>
    </code-section>

    <code-section>
      <div slot="title">8. 获取当前账户余额</div>
      <pre slot="code">
FFWProxy.getBalances().then(balances=>{
  console.log(balances);
}).catch(err=>{
  console.error(err);
})
      </pre>
      <div slot="actions">
        <button class="primary-btn" @click="getBalances">获取</button>
      </div>
      <div slot="result">{{balances}}</div>
    </code-section>


    <code-section>
      <div slot="title">9. 签名数据（校验权限用），待签名数据必须为JSON格式的字符串</div>
      <pre slot="code">
let data = { accountid: this.accountid, time: new Date().getTime() }
data = JSON.stringify(data);
console.log(`待签名数据：${data}`)
FFWProxy.sign(data).then(result=>{
    console.log(`签名结果：${result}`)
  }).catch(err=>{
    console.error(err)
  })
      </pre>
      <div slot="actions">
        <button class="primary-btn" @click="sign">签名</button>
      </div>
      <div slot="result">
        待签名数据:{{signdata}}<br/>
        签名结果：{{signresult}}
      </div>
    </code-section>

    <code-section>
      <div slot="title">10. 支付功能</div>
      <pre slot="code">
FFWProxy.pay({
  destination: 'GCKKUWHT3ILQWWKQ3MUOCAC7LRJNLCOES7SEI6TCQVGZD4GCULO2PGNU', 
  code: 'XFF', 
  issuer: 'GAZEX2USUBMMWFRZFS77VDJYXUFLXI4ZGFPWX6TBNZCSTEQWNLFZMXFF', 
  amount: 1, 
  memo_type: 'TEXT', //取值见stellar的api文档
  memo: 'Hello,FFW'
}).then(data=>{
  console.log('pay success')
}).catch(err=>{
  console.error(err)
})
      </pre>
      <div slot="actions">
        <button class="primary-btn" @click="pay">支付</button>
      </div>
      <div slot="result">
        <span v-if="payresult">支付成功</span>
      </div>
    </code-section>

    <code-section>
      <div slot="title">11. 路径支付功能</div>
      <pre slot="code">
FFWProxy.pathPayment({
  destination: 'GCKKUWHT3ILQWWKQ3MUOCAC7LRJNLCOES7SEI6TCQVGZD4GCULO2PGNU', 
  code: 'XFF', 
  issuer: 'GAZEX2USUBMMWFRZFS77VDJYXUFLXI4ZGFPWX6TBNZCSTEQWNLFZMXFF', 
  amount: 1, 
  memo_type: 'TEXT', 
  memo: 'Hello,FFW'
}).then(data=>{
    console.log('pathpayment success')
}).catch(err=>{
  console.error(err)
})
      </pre>
      <div slot="actions">
        <button class="primary-btn" @click="pathPayment">路径支付</button>
      </div>
      <div slot="result">
        <span v-if="pathPaymentResult">路径支付操作成功</span>
      </div>
    </code-section>

    
    <code-section>
      <div slot="title">12. 授信操作</div>
      <pre slot="code">
let code = 'XFF';
let issuer = 'GAZEX2USUBMMWFRZFS77VDJYXUFLXI4ZGFPWX6TBNZCSTEQWNLFZMXFF';
FFWProxy.trust(code,issuer)
  .then(data=>{
    console.log('trust success');
  }).catch(err=>{
    console.error(err)
  })
      </pre>
      <div slot="actions">
        <button class="primary-btn" @click="trust">授信XFF</button>
      </div>
      <div slot="result">
        <span v-if="trustResult">授信XFF操作成功</span>
      </div>
    </code-section>

  <code-section>
    <div slot="title">13. XDR签名操作</div>
    <pre slot="code">
let xdr = 'AAAAAEpng8wi7nIqz02/1bmC4I5jzz763WoadKIWy7M5MVc3AAAAZACHjkkAAAABAAAAAAAAAAAAAAABAAAAAAAAAAoAAAALaG9tZV9kb21haW4AAAAAAQAAABBodHRwOi8vZmNoYWluLmlvAAAAAAAAAAA='
FFWProxy.signXDR(xdr,"签名XDR").then(data=>{
    console.log(`签名后的XDR:${data}`)
  }).catch(err=>{
    console.error(err)
  })
    </pre>
    <div slot="actions">
      <button class="primary-btn" @click="signXDR">XDR签名</button>
    </div>
    <div slot="result">
      待签名数据：{{xdr}}<br/>
      签名后数据：{{xdrresult}}
    </div>
  </code-section>
  

    <code-section>
      <div slot="title">14. 扫描二维码操作</div>
      <pre slot="code">
FFWProxy.scan().then(data=>{
  console.log(`扫描结果：${data}`)
})
.catch(err=>{
  console.error(err)
})
      </pre>
      <div slot="actions">
        <button class="primary-btn" @click="scan">扫描二维码</button>
      </div>
      <div slot="result">
        扫描结果：{{scanResult}}
      </div>
    </code-section>

    
    <code-section>
      <div slot="title">15. 分享功能</div>
      <pre slot="code">
let options = {
  message: '分享图片',
  files: ['base64格式图片']
};
FFWProxy.share(options).then(data=>{
  console.log(`share success`)
  this.shareResult = true
}).catch(err=>{
  console.error(err)
})
      </pre>
      <div slot="actions">
        <button class="primary-btn" @click="getBalances">获取</button>
      </div>
      <div slot="result">
        <span v-if="shareResult">授信XFF操作成功</span>
      </div>
    </code-section>



  </div>
</template>

<script>
import CodeSection from './CodeSection'
import { FireFlyWallet } from 'fireflywallet-api';
const FFWProxy = new FireFlyWallet();

export default {
  components:{
    CodeSection,
  },
  data(){
    return {
      ready: false,
      version: null,
      platform: null,
      accountid: null,
      contacts: [],
      uuid:null,
      locale:null,
      balances:[],
      signdata:null,
      signresult:null,

      payresult: null,
      pathPaymentResult: null,
      trustResult: null,
      xdr: null,
      xdrresult:null,
      scanResult: null,
      shareResult: null,
    }
  },
  mounted(){
    FFWProxy.ready().then(FFW =>{
      console.log('firefly wallet is ready!');
      this.ready = true;
      this.getVersion();
      this.getPlatform();
      this.getAccountId();
      this.getUuid();
      this.getLocale();
      this.getContacts();

    }).catch(err=>{
      console.error(err)
    });
  },
  methods:{
    getVersion(){
      FFWProxy.getVersion().then(version=>{
        this.version = version;
      })
      .catch(err=>{
        console.error(err);
      })
    },
    getPlatform(){
      FFWProxy.getPlatform().then(platform=>{
        this.platform = platform;
      })
      .catch(err=>{
        console.error(err);
      });
    },
    getAccountId(){
      FFWProxy.getAccountId().then(accountid=>{
        this.accountid = accountid;
      }).catch(err=>{
        console.error(err)
      })
    },
    getUuid(){
      FFWProxy.getUuid().then(uuid=>{
        this.uuid = uuid
      })
      .catch(err=>{
        console.error(err)
      })
    },
    getLocale(){
      FFWProxy.getLocale().then(locale=>{
        this.locale = locale
      }).catch(err=>{
        console.error(err)
      })
    },
    getContacts(){
      FFWProxy.getContacts().then(contacts=>{
        this.contacts = contacts;
      }).catch(err=>{
        console.error(err)
      })
    },
    getBalances(){
      FFWProxy.getBalances().then(balances=>{
        this.balances = balances
      }).catch(err=>{
        console.error(err)
      })
    },
    sign(){
      let data = { accountid: this.accountid, time: new Date().getTime() }
      this.signdata = JSON.stringify(data)
      FFWProxy.sign(data)
        .then(result=>{
          this.signresult = result
        })
        .catch(err=>{
          console.log('----error---')
          console.error(err)
        })
    },
    pay(){
      FFWProxy.pay({
         destination: 'GCKKUWHT3ILQWWKQ3MUOCAC7LRJNLCOES7SEI6TCQVGZD4GCULO2PGNU', 
         code: 'XFF', 
         issuer: 'GAZEX2USUBMMWFRZFS77VDJYXUFLXI4ZGFPWX6TBNZCSTEQWNLFZMXFF', 
         amount: 1, 
         memo_type: 'TEXT', //取值见stellar的api文档
         memo: 'Hello,FFW'
       }).then(data=>{
         console.log('pay success');
         this.payresult = true
       }).catch(err=>{
         console.error(err)
       })
    },
    pathPayment(){
      FFWProxy.pathPayment({
        destination: 'GCKKUWHT3ILQWWKQ3MUOCAC7LRJNLCOES7SEI6TCQVGZD4GCULO2PGNU', 
        code: 'XFF', 
        issuer: 'GAZEX2USUBMMWFRZFS77VDJYXUFLXI4ZGFPWX6TBNZCSTEQWNLFZMXFF', 
        amount: 1, 
        memo_type: 'TEXT', 
        memo: 'Hello,FFW'
      }).then(data=>{
         console.log('pathpayment success')
         this.pathPaymentResult = true
       }).catch(err=>{
         console.error(err)
       })
    },
    trust(){
      let code = 'XFF';
      let issuer = 'GAZEX2USUBMMWFRZFS77VDJYXUFLXI4ZGFPWX6TBNZCSTEQWNLFZMXFF';
      FFWProxy.trust(code,issuer)
        .then(data=>{
          alert('trust success')
        }).catch(err=>{
          console.error(err)
        })
      
    },

    signXDR(){
      this.xdr = 'AAAAAEpng8wi7nIqz02/1bmC4I5jzz763WoadKIWy7M5MVc3AAAAZACHjkkAAAABAAAAAAAAAAAAAAABAAAAAAAAAAoAAAALaG9tZV9kb21haW4AAAAAAQAAABBodHRwOi8vZmNoYWluLmlvAAAAAAAAAAA='
      FFWProxy.signXDR(this.xdr,"签名XDR")
        .then(data=>{
          console.log(`签名后的XDR:${data}`)
          this.xdrresult = data
        })
        .catch(err=>{
          console.error(err)
        })
    },
    scan(){
      FFWProxy.scan()
        .then(data=>{
          console.log(`扫描结果：${data}`);
          this.scanResult = true
        })
        .catch(err=>{
          console.error(err)
        })
    },
    share(){
      let options = {
         message: '分享图片',
         files: [''], //图片，支持远程图片或base64格式的图片等
        };
      FFWProxy.share(options)
        .then(data=>{
          console.log(`share success`)
          this.shareResult = true
        })
        .catch(err=>{
          console.error(err)
        })
    }


  }

}
</script>

<style>
.primary-btn{
  padding: 8px 8px;
  background: #21CE90;
  color:#FFFFFF;
  border-width: 0px; /* 边框宽度 */
	border-radius: 3px; /* 边框半径 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */

}
</style>
